﻿@{
    ViewBag.Title = "Grid : Show Cell As TextBox";
}

<h2>Grid : Show Cell As TextBox</h2>

    <h3>Sample</h3>

@{
    Html.Telerik().Grid<TelerikMvcClientApi.Models.Product>()
        .Name("MyGrid")
        .Columns(columns =>
        {
            columns.Bound(c => c.Name);
            columns.Bound(c => c.Category);
            columns.Bound(c => c.SubCategory).Width(400);
            columns.Bound(c => c.Controls).Title("Controls/Features").ClientTemplate("<#= Controls==0?'':Controls #>");
        })
        .ClientEvents(events => events.OnRowDataBound("MyGrid_OnRowDataBound"))
        .DataBinding(dataBinding => dataBinding.Ajax().Select("SelectProducts", "Grid"))
        .Render();
}

<h3>Documentation</h3>
<p>
The Grid implements the OnRowDataBound client event that calls the MyGrid_OnRowDataBound() event handler.
The event handler sets the Controls/Features cell to A textbox using the showCellAsTextBox() function.
The Controls/Features textbox also verifies that the value entered is an integer.  If it is not then it rolls 
back the value back to the previous value, otherwise the textbox border color is changed to red.
<pre class="code">
MyGrid_OnRowDataBound=function (e) {
    var grid=$('#MyGrid').data('tGrid');

    // Show the Name cell as TextBox.
    grid.showCellAsTextBox({
        row: (e.row.rowIndex-1),
        column: 3,
        formatDisplay: function (textBox,rowData) {
            textBox.val(rowData.Controls);
            textBox.css('text-align','right');
            textBox.css('width','100%');
        },
        onChange: function (params) {
            if(isInt(params.newValue)==false) {
                params.cancel=true;
            }
            else {
                params.textBox.css('border-color','Red');
            }
        }
    });
}
</pre>
</p>

<script type="text/javascript">
    //checks if value is integer
    isInt = function(n){
        var reInt = new RegExp(/^-?\d+$/);
        if (!reInt.test(n)) {
            return false;
        }
        return true;
    }

    MyGrid_OnRowDataBound=function (e) {
        var grid=$('#MyGrid').data('tGrid');

        // Show the Name cell as TextBox.
        grid.showCellAsTextBox({
            row: (e.row.rowIndex-1),
            column: 3,
            formatDisplay: function (textBox,rowData) {
                textBox.val(rowData.Controls);
                textBox.css('text-align','right');
                textBox.css('width','100%');
            },
            onChange: function (params) {
                if(isInt(params.newValue)==false) {
                    params.cancel=true;
                }
                else {
                    params.textBox.css('border-color','Red');
                }
            }
        });
    }
</script>
